<template>
  <div class="box-container">
    <add-btn text="添加分类" @click.native="onAdd" />
    <categories-table :categories-list="categoriesList" />
    <pagination
      :page-data="categoriesForm"
      :total="total"
      :page-sizes="pageSizes"
      @page-change="loadCategoriesList"
    />

    <!-- 添加分类对话框 -->
    <el-dialog
      title="添加商品分类"
      :visible.sync="addDialogVisible"
      width="50%"
      :before-close="close"
    >
      <!-- 绑定的form表单数据 -->
      <el-form ref="categorieForm" :rules="categoriesFormRules" :model="categorieForm" label-width="90px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model.trim="categorieForm.cat_name" />
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- <el-input v-model.trim="addressForm.area" placeholder="请选择" /> -->
          <el-cascader
            v-model="classification"
            :options="options"
            clearable
            :props="{ checkStrictly: true , label: 'cat_name' , value:'cat_id' }"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCategoriesList, addCategories } from '@/api/categories'
import CategoriesTable from './components/CategoriesTable.vue'
export default {
  components: { CategoriesTable },
  data() {
    return {
      categoriesList: [],
      pageSizes: [5, 10, 15, 20],
      total: 0,
      categoriesForm: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      addDialogVisible: false,
      categorieForm: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      categoriesFormRules: {
        cat_name: [{ required: true, message: '不能为空！', trigger: 'blur' }]
      },
      options: [],
      classification: []
    }
  },

  created() {
    this.loadCategoriesList()
  },

  methods: {
    async loadCategoriesList() {
      const res = await getCategoriesList(this.categoriesForm)
      this.total = res.total
      res.result.forEach((item, index) => {
        item.index = index + 1
      })
      this.categoriesList = res.result
    },
    // 点击添加分类
    async onAdd() {
      const res = await getCategoriesList({ type: 2 })
      this.options = res
      this.addDialogVisible = true
    },
    // 点击了确认
    async onSave() {
      await this.$refs.categorieForm.validate()
      this.categorieForm.cat_level = this.classification.length
      this.categorieForm.cat_pid = this.classification.length ? this.classification[this.classification.length - 1] : 0
      await addCategories(this.categorieForm)
      this.$message.success('添加分类成功！')
      this.close()
      this.loadCategoriesList()
    },
    // 对话框关闭
    close() {
      this.$refs.categorieForm.resetFields()
      this.addDialogVisible = false
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
